<script type="text/javascript">
  settingsPhotoVal();
  initAjaxImageUpload(1, 'settings/photo/upload', 'user_image');
</script>
<div class="col-sm-9 content-right">
  <ol class="breadcrumb">
    <li><a class="route-controller" href="<?php echo site_url('home'); ?>">Home</a></li>
    <li><a class="route-controller" href="<?php echo site_url('settings'); ?>">Settings</a></li>
    <li>Photo</li>
  </ol>
  <h3>Settings</h3>
  <ul class="nav nav-tabs">
    <li><a class="route-controller" href="<?php echo site_url('settings/general'); ?>">General</a></li>
    <li><a class="route-controller" href="<?php echo site_url('settings/profile'); ?>">Profile</a></li>
    <li class="active"><a class="route-controller" href="<?php echo site_url('settings/photo'); ?>">Photo</a></li>
    <li><a class="route-controller" href="<?php echo site_url('settings/password'); ?>">Password</a></li>
    <li><a class="route-controller" href="<?php echo site_url('settings/privacy'); ?>">Privacy</a></li>
    <li><a class="route-controller" href="<?php echo site_url('settings/notification'); ?>">Notification</a></li>
  </ul>
  <div class="height-gap-10"></div>
  <div class="tab-content clearfix">
    <form id="settings_photo_form" method="post" action="<?php echo site_url('settings/photo'); ?>" enctype="multipart/form-data">
      <div class="form-group">
        <?php if (!empty($user_data['user_image'])) { ?>
          <a class="route-controller-non confirm-action pull-right" href="<?php echo site_url('settings/photo/delete'); ?>" confirm="Are you sure to delete your photo ?"><i class="fa fa-trash-o"></i>&nbsp;Delete Photo</a>
        <?php } ?>
        <label for="user_photo">Current Photo</label>
        <div class="thumbnail">
          <img src="<?php echo user_image_url($user_data['user_image']); ?>" alt="User Image"/>
        </div>
      </div>
      <div class="form-group" id="user_image_form_group">
        <label for="user_photo">New Photo</label>
        <input type="hidden" name="user_image_uploaded" id="user_image_uploaded" value=""/>
        <div class="fileinput fileinput-new input-group text-center" data-provides="fileinput">
          <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
          <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" id="user_image_file" name="user_image_file" onchange="removeImgIds('user_image');"/></span>
          <span class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput" onclick="removeImgIds('user_image');">Remove</span>
        </div>
      </div>
      <div class="form-group">
        <div class="progress progress-striped">
          <div id="user_image_progress" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 0px;">
            <span class="sr-only"></span>
          </div>
        </div>
        <div class="text-muted pull-left" id="user_image_message">0 files selected</div>
      </div>
      <button class="btn btn-danger pull-right" type="submit">Save</button>
    </form>
  </div>
  <?php if (!empty($status)) { ?>
    <div class="height-gap-10"></div>
    <div class="alert alert-success">
      <p>Successfully changed profile photo</p>
    </div>
  <?php } ?>
</div>